<template>
  <div id="china_map_box">
    <div id="container"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import Vue from 'vue'
Vue.prototype.$echarts = echarts;
import 'echarts/map/js/china.js' 
export default {
  data() {
    return {
        options: {
                tooltip: {
                    triggerOn: "mousemove",   //mousemove、click
                    padding:8,
                    borderWidth:1,
                    borderColor:'red',
                    backgroundColor:'rgba(255,255,255,0.7)',
                    textStyle:{
                        color:'#000000',
                        fontSize:13
                    },
                    formatter: function(e, t, n) {
                        // console.log(e);
                        
                        // let data = e.data;
                        // //模拟数据
                        // // data.specialImportant = Math.random()*1000 | 0;
                        // let context = `
                        //    <div>
                        //        <p><b style="font-size:15px;">${data.name}</b></p>
                            
                        //    </div>
                        // `
                        // return context;
                    }
                },
                visualMap: {
                    text:['分解率范围(%)', ''],
                    type: 'piecewise',//continuous
                    show:true,
                    right: 96,
                    bottom: 40,
                    showLabel:true,
                    pieces: [
                        {
                        gte: 100,
                        label: "> 50",
                        color: "#1f307b"
                        },
                        {
                        gte:50 ,
                        lt: 999,
                        label: "40 - 50",
                        color: "#3c57ce"
                        },
                        {
                        gte: 40,
                        lt:499,
                        label: " 30 - 40",
                        color: "#6f83db"
                        },
                        {
                        gte: 30,
                        lt: 99,
                        label: "20 - 30",
                        color: "#9face7"
                        },
                        {
                        gte: 20,
                        lt: 99,
                        label: "10 - 20",
                        color: "#9face7"
                        },
                        {
                        lt:10,
                        label:'<10',
                        color: "#bcc5ee"
                        }
                    ]
                },
                geo: {
                    map: "china",
                    scaleLimit: {
                        min: 1,
                        max: 2
                    },
                    zoom: 1,
                    top: 120,
                    label: {
                        normal: {
                        show:true,
                        fontSize: "14",
                        color: "rgba(0,0,0,0.7)"
                        }
                    },
                    itemStyle: {
                        normal: {
                        borderColor: "rgba(0, 0, 0, 0.2)"
                        },
                        emphasis: {
                        areaColor: "#f2d5ad",
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        borderWidth: 0
                        }
                    }
                },
                series: [
                    {
                        type: "map",
                        geoIndex: 0,
                        data:[],
                        
                    }
                ]
        },
        dataList: [
            {
            name: "北京",
            value: 5040
            },
            {
            name: "天津",
            value: 130
            },
            {
            name: "上海",
            value: 400
            },
            {
            name: "重庆",
            value: 750
            },
            {
            name: "河北",
            value: 130
            },
            {
            name: "河南",
            value: 830
            },
            {
            name: "云南",
            value: 110
            },
            {
            name: "辽宁",
            value: 900
            },
            {
            name: "黑龙江",
            value: 150
            },
            {
            name: "湖南",
            value: 690
            },
            {
            name: "安徽",
            value: 60
            },
            {
            name: "山东",
            value: 39
            },
            {
            name: "新疆",
            value: 4
            },
            {
            name: "江苏",
            value: 31
            },
            {
            name: "浙江",
            value: 104
            },
            {
            name: "江西",
            value: 36
            },
            {
            name: "湖北",
            value: 52
            },
            {
            name: "广西",
            value: 33
            },
            {
            name: "甘肃",
            value: 7
            },
            {
            name: "山西",
            value: 5
            },
            {
            name: "内蒙古",
            value: 778
            },
            {
            name: "陕西",
            value: 22
            },
            {
            name: "吉林",
            value: 4
            },
            {
            name: "福建",
            value: 900
            },
            {
            name: "贵州",
            value: 0
            },
            {
            name: "广东",
            value: 98
            },
            {
            name: "青海",
            value: 1
            },
            {
            name: "西藏",
            value: 0
            },
            {
            name: "四川",
            value: 44
            },
            {
            name: "宁夏",
            value: 4
            },
            {
            name: "海南",
            value: 22
            },
            {
            name: "台湾",
            value: 3
            },
            {
            name: "香港",
            value: 5
            },
            {
            name: "澳门",
            value: 555
            }
        ]
    };
  },
  methods: {
        setEchartOption(){
            this.options.series[0]['data'] = this.dataList;
        },
        // 配置渲染map
        mapChart() {
            let myChart = echarts.init(document.getElementById("container"));
            myChart.setOption(this.options);
            window.addEventListener("resize", () => {
                myChart.resize();
            });
            var max = 480;
            var min = 9; // todo
            var maxSize4Pin = 100;
            var minSize4Pin = 20;
            
            initEcharts("china");
            function initEcharts(map) {
                var convertData = function(data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                
                    res.push({
                    name: data[i].name,
                    });
                }
                return res;
                };
            let option = {
                backgroundColor: {
                    // type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [
                    {
                        offset: 0,
                        color: "#fff", // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: "#f3f3f3", // 100% 处的颜色
                    },
                    ],
                    globalCoord: false, // 缺省为 false
                },
                geo: {
                    regions: [
                        {
                          
                            name: "南海诸岛",
                            itemStyle: {
                            // 隐藏地图
                            normal: {
                                opacity: 0, // 为 0 时不绘制该图形
                            },
                            },
                            label: {
                            show: false, // 隐藏文字
                            },
                        },
                    ],
                
                    map: map,
                    roam: true,
                    scaleLimit: {
                    min: 1.2,
                    max: 3,
                    },
                    zoom: 1.2,
                    //图形上的文本标签，可用于说明图形的一些数据信息
                    label: {
                    normal: {
                        show: true,
                        fontSize: "14",
                        color: "rgba(0,0,0,0.7)",
                    },
                    },
                    //地图区域的多边形 图形样式，有 normal 和 emphasis 两个状态
                    itemStyle: {
                    //normal 是图形在默认状态下的样式；
                    normal: {
                        borderColor: "rgba(0, 0, 0, 0.2)",
                    },
                    //emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                    emphasis: {
                        areaColor: "red",
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 20,
                        borderWidth: 0,
                        shadowColor: "rgba(0, 0, 0, 0.5)",
                    },
                    },
                },

            };
            myChart.setOption(option);
             
        }
        //定义全国省份的数组
        var provinces = {
            // 23个省
            台湾: "taiwan",
            河北: "hebei",
            山西: "shanxiyi",
            辽宁: "liaoning",
            吉林: "jilin",
            黑龙江: "heilongjiang",
            江苏: "jiangsu",
            浙江: "zhejiang",
            安徽: "anhui",
            福建: "fujian",
            江西: "jiangxi",
            山东: "shandong",
            河南: "henan",
            湖北: "hubei",
            湖南: "hunan",
            广东: "guangdong",
            海南: "hainan",
            四川: "sichuan",
            贵州: "guizhou",
            云南: "yunnan",
            陕西: "shanxisan",
            甘肃: "gansu",
            青海: "qinghai",
            // 5个自治区
            新疆: "xinjiang",
            广西: "guangxi",
            内蒙古: "neimenggu",
            宁夏: "ningxia",
            西藏: "xizang",
            // 4个直辖市
            北京: "beijing",
            天津: "tianjin",
            上海: "shanghai",
            重庆: "chongqing",
            // 2个特别行政区
            香港: "xianggang",
            澳门: "aomen",
        };

        // 市
        var cityMap = {
            北京市: "110100",
            天津市: "120100",
            上海市: "310100",
            重庆市: "500100",
            崇明县: "310200",
            湖北省直辖县市: "429000",
            铜仁市: "522200",
            毕节市: "522400",
            石家庄市: "130100",
            唐山市: "130200",
            秦皇岛市: "130300",
            邯郸市: "130400",
            邢台市: "130500",
            保定市: "130600",
            张家口市: "130700",
            承德市: "130800",
            沧州市: "130900",
            廊坊市: "131000",
            衡水市: "131100",
            太原市: "140100",
            大同市: "140200",
            阳泉市: "140300",
            长治市: "140400",
            晋城市: "140500",
            朔州市: "140600",
            晋中市: "140700",
            运城市: "140800",
            忻州市: "140900",
            临汾市: "141000",
            吕梁市: "141100",
            呼和浩特市: "150100",
            包头市: "150200",
            乌海市: "150300",
            赤峰市: "150400",
            通辽市: "150500",
            鄂尔多斯市: "150600",
            呼伦贝尔市: "150700",
            巴彦淖尔市: "150800",
            乌兰察布市: "150900",
            兴安盟: "152200",
            锡林郭勒盟: "152500",
            阿拉善盟: "152900",
            沈阳市: "210100",
            大连市: "210200",
            鞍山市: "210300",
            抚顺市: "210400",
            本溪市: "210500",
            丹东市: "210600",
            锦州市: "210700",
            营口市: "210800",
            阜新市: "210900",
            辽阳市: "211000",
            盘锦市: "211100",
            铁岭市: "211200",
            朝阳市: "211300",
            葫芦岛市: "211400",
            长春市: "220100",
            吉林市: "220200",
            四平市: "220300",
            辽源市: "220400",
            通化市: "220500",
            白山市: "220600",
            松原市: "220700",
            白城市: "220800",
            延边朝鲜族自治州: "222400",
            哈尔滨市: "230100",
            齐齐哈尔市: "230200",
            鸡西市: "230300",
            鹤岗市: "230400",
            双鸭山市: "230500",
            大庆市: "230600",
            伊春市: "230700",
            佳木斯市: "230800",
            七台河市: "230900",
            牡丹江市: "231000",
            黑河市: "231100",
            绥化市: "231200",
            大兴安岭地区: "232700",
            南京市: "320100",
            无锡市: "320200",
            徐州市: "320300",
            常州市: "320400",
            苏州市: "320500",
            南通市: "320600",
            连云港市: "320700",
            淮安市: "320800",
            盐城市: "320900",
            扬州市: "321000",
            镇江市: "321100",
            泰州市: "321200",
            宿迁市: "321300",
            杭州市: "330100",
            宁波市: "330200",
            温州市: "330300",
            嘉兴市: "330400",
            湖州市: "330500",
            绍兴市: "330600",
            金华市: "330700",
            衢州市: "330800",
            舟山市: "330900",
            台州市: "331000",
            丽水市: "331100",
            合肥市: "340100",
            芜湖市: "340200",
            蚌埠市: "340300",
            淮南市: "340400",
            马鞍山市: "340500",
            淮北市: "340600",
            铜陵市: "340700",
            安庆市: "340800",
            黄山市: "341000",
            滁州市: "341100",
            阜阳市: "341200",
            宿州市: "341300",
            六安市: "341500",
            亳州市: "341600",
            池州市: "341700",
            宣城市: "341800",
            福州市: "350100",
            厦门市: "350200",
            莆田市: "350300",
            三明市: "350400",
            泉州市: "350500",
            漳州市: "350600",
            南平市: "350700",
            龙岩市: "350800",
            宁德市: "350900",
            南昌市: "360100",
            景德镇市: "360200",
            萍乡市: "360300",
            九江市: "360400",
            新余市: "360500",
            鹰潭市: "360600",
            赣州市: "360700",
            吉安市: "360800",
            宜春市: "360900",
            抚州市: "361000",
            上饶市: "361100",
            济南市: "370100",
            青岛市: "370200",
            淄博市: "370300",
            枣庄市: "370400",
            东营市: "370500",
            烟台市: "370600",
            潍坊市: "370700",
            济宁市: "370800",
            泰安市: "370900",
            威海市: "371000",
            日照市: "371100",
            莱芜市: "371200",
            临沂市: "371300",
            德州市: "371400",
            聊城市: "371500",
            滨州市: "371600",
            菏泽市: "371700",
            郑州市: "410100",
            开封市: "410200",
            洛阳市: "410300",
            平顶山市: "410400",
            安阳市: "410500",
            鹤壁市: "410600",
            新乡市: "410700",
            焦作市: "410800",
            濮阳市: "410900",
            许昌市: "411000",
            漯河市: "411100",
            三门峡市: "411200",
            南阳市: "411300",
            商丘市: "411400",
            信阳市: "411500",
            周口市: "411600",
            驻马店市: "411700",
            省直辖县级行政区划: "469000",
            武汉市: "420100",
            黄石市: "420200",
            十堰市: "420300",
            宜昌市: "420500",
            襄阳市: "420600",
            鄂州市: "420700",
            荆门市: "420800",
            孝感市: "420900",
            荆州市: "421000",
            黄冈市: "421100",
            咸宁市: "421200",
            随州市: "421300",
            恩施土家族苗族自治州: "422800",
            长沙市: "430100",
            株洲市: "430200",
            湘潭市: "430300",
            衡阳市: "430400",
            邵阳市: "430500",
            岳阳市: "430600",
            常德市: "430700",
            张家界市: "430800",
            益阳市: "430900",
            郴州市: "431000",
            永州市: "431100",
            怀化市: "431200",
            娄底市: "431300",
            湘西土家族苗族自治州: "433100",
            广州市: "440100",
            韶关市: "440200",
            深圳市: "440300",
            珠海市: "440400",
            汕头市: "440500",
            佛山市: "440600",
            江门市: "440700",
            湛江市: "440800",
            茂名市: "440900",
            肇庆市: "441200",
            惠州市: "441300",
            梅州市: "441400",
            汕尾市: "441500",
            河源市: "441600",
            阳江市: "441700",
            清远市: "441800",
            东莞市: "441900",
            中山市: "442000",
            潮州市: "445100",
            揭阳市: "445200",
            云浮市: "445300",
            南宁市: "450100",
            柳州市: "450200",
            桂林市: "450300",
            梧州市: "450400",
            北海市: "450500",
            防城港市: "450600",
            钦州市: "450700",
            贵港市: "450800",
            玉林市: "450900",
            百色市: "451000",
            贺州市: "451100",
            河池市: "451200",
            来宾市: "451300",
            崇左市: "451400",
            海口市: "460100",
            三亚市: "460200",
            三沙市: "460300",
            成都市: "510100",
            自贡市: "510300",
            攀枝花市: "510400",
            泸州市: "510500",
            德阳市: "510600",
            绵阳市: "510700",
            广元市: "510800",
            遂宁市: "510900",
            内江市: "511000",
            乐山市: "511100",
            南充市: "511300",
            眉山市: "511400",
            宜宾市: "511500",
            广安市: "511600",
            达州市: "511700",
            雅安市: "511800",
            巴中市: "511900",
            资阳市: "512000",
            阿坝藏族羌族自治州: "513200",
            甘孜藏族自治州: "513300",
            凉山彝族自治州: "513400",
            贵阳市: "520100",
            六盘水市: "520200",
            遵义市: "520300",
            安顺市: "520400",
            黔西南布依族苗族自治州: "522300",
            黔东南苗族侗族自治州: "522600",
            黔南布依族苗族自治州: "522700",
            昆明市: "530100",
            曲靖市: "530300",
            玉溪市: "530400",
            保山市: "530500",
            昭通市: "530600",
            丽江市: "530700",
            普洱市: "530800",
            临沧市: "530900",
            楚雄彝族自治州: "532300",
            红河哈尼族彝族自治州: "532500",
            文山壮族苗族自治州: "532600",
            西双版纳傣族自治州: "532800",
            大理白族自治州: "532900",
            德宏傣族景颇族自治州: "533100",
            怒江傈僳族自治州: "533300",
            迪庆藏族自治州: "533400",
            拉萨市: "540100",
            昌都地区: "542100",
            山南地区: "542200",
            日喀则地区: "542300",
            那曲地区: "542400",
            阿里地区: "542500",
            林芝地区: "542600",
            西安市: "610100",
            铜川市: "610200",
            宝鸡市: "610300",
            咸阳市: "610400",
            渭南市: "610500",
            延安市: "610600",
            汉中市: "610700",
            榆林市: "610800",
            安康市: "610900",
            商洛市: "611000",
            兰州市: "620100",
            嘉峪关市: "620200",
            金昌市: "620300",
            白银市: "620400",
            天水市: "620500",
            武威市: "620600",
            张掖市: "620700",
            平凉市: "620800",
            酒泉市: "620900",
            庆阳市: "621000",
            定西市: "621100",
            陇南市: "621200",
            临夏回族自治州: "622900",
            甘南藏族自治州: "623000",
            西宁市: "630100",
            海东地区: "632100",
            海北藏族自治州: "632200",
            黄南藏族自治州: "632300",
            海南藏族自治州: "632500",
            果洛藏族自治州: "632600",
            玉树藏族自治州: "632700",
            海西蒙古族藏族自治州: "632800",
            银川市: "640100",
            石嘴山市: "640200",
            吴忠市: "640300",
            固原市: "640400",
            中卫市: "640500",
            乌鲁木齐市: "650100",
            克拉玛依市: "650200",
            吐鲁番地区: "652100",
            哈密地区: "652200",
            昌吉回族自治州: "652300",
            博尔塔拉蒙古自治州: "652700",
            巴音郭楞蒙古自治州: "652800",
            阿克苏地区: "652900",
            克孜勒苏柯尔克孜自治州: "653000",
            喀什地区: "653100",
            和田地区: "653200",
            伊犁哈萨克自治州: "654000",
            塔城地区: "654200",
            阿勒泰地区: "654300",
            自治区直辖县级行政区划: "659000",
            台湾省: "710000",
            香港特别行政区: "810100",
            澳门特别行政区: "820000",
        };

        var that = this;

        // 点击触发
        myChart.on("click", (param) => {
                // console.log(1);
                
            if (param.name in provinces) {
            // 处理省模块
            let names = param.name;
            for (let key in provinces) {
                if (names == key) {
                showProvince(provinces[key], key);
                break;
                }
            }
            } else if (param.name in cityMap) {
            // 处理市模块
            let names = param.name;
            for (let key in cityMap) {
                if (names == key) {
                showCitys(cityMap[key], key);
                break;
                }
            }
            }
        });

        //展示对应的省
        function showProvince(eName, param) {
                if(eName == 'yunnan'){         
                    }else if( eName =='guizhou' ){
                    }else if( eName=='guangxi'  ){  
                    }else if(eName=='guangdong'  ){ 
                    }else if( eName=='hainan' ){ 
                    }else if(  eName=='taiwan'){  
                    }else{
                       that.$router.push(eName)
                    }
            
            }

    
        },
  },
  created() {
    this.setEchartOption();  
  },
  mounted() {
     this.$nextTick(()=>{
          this.mapChart();
      })
  },
};
</script>

<style scoped>
#container {
  width: 100%;
  height: 100vh;
  margin: 0px auto 0;
}
.btn {
  position: absolute;
  right: 10%;
  z-index: 999;
}
</style>
